<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" right-icon="search" height="65px" leftText="返回" title="选择城市" @clickRight="search" @clickLeft="back" />
		</view>
		<view class="main">
			<view class="dingwei-city">定位城市</view>
			<view class="dingwei-city-but">
			    <button>焦作</button>
				<button style="background-color: #F5F5F5;border:none;color:#1786FF;">重新定位</button>
			</view>
			<view class="remen-city">热门城市</view>
			<view class="remen-city-but">
				<button>上海</button>
				<button>深圳</button>
				<button>广州</button>
			</view>
			<view class="remen-city-but">
				<button>成都</button>
				<button>三亚</button>
				<button>杭州</button>
			</view>
			<view class="remen-city-but">
				<button>西安</button>
				<button>南京</button>
				<button>厦门</button>
			</view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control 
				:current="current" 
				:values="items" 
				style-type="text"
				active-color="#007aff" 
				@clickItem="onClickItem" />
			</view>
			<view class="content">
				<view class="content-city" v-if="current === 0">
		            <uni-indexed-list class="content-city-list" :options="list1" :show-select="true" @click="bindClick1" />
				</view>
			    <view class="content-city" v-if="current === 1">
		            <uni-indexed-list class="content-city-list" :options="list2" :show-select="true" @click="bindClick2" />
			    </view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import cities from '@/common/cities.js'
	import wordcities from '@/common/WordCities.js'
	export default {
			components: {},
			data() {
				return {
					items: ['国内', '国外'],
					current: 0,
					list1:cities.list,
					list2:wordcities.list
				}
			},
			methods: {
				back() {
					uni.switchTab({
						url:'/pages/index/index'
					})
				},
				onClickItem(e) {
					if (this.current !== e.currentIndex) {
						this.current = e.currentIndex
					}
				},
				bindClick1(e) {
					console.log('点击item，返回数据' + JSON.stringify(e))
				}
			},
		}
</script>

<style>
	.main{
		padding: 25rpx;
	}
	
	.uni-padding-wrap {
		width: 100%;
		border-bottom: 2rpx solid #BCBCBC
	}
	
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}
	.dingwei-city,.remen-city{
		color: #AEAEAE;
	}	
	.content-city-list{
		height: 920rpx;
		margin-top: 680rpx;
	}
	.dingwei-city-but,.remen-city-but{
		display: flex;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.dingwei-city-but button{
		width: 49%;
		background-color: #EBF2FA;
		border: 1rpx solid #CDE1F6
	}
	.remen-city-but button{
		width: 32%;
		background-color: #EBF2FA;
		border: 1rpx solid #CDE1F6
	}
</style>